<script setup lang="ts">
import NavContentCom from '@/components/home/NavContentCom.vue';
import SwipeCom from '@/components/home/SwipeCom.vue';
import ShowContentCom from '@/components/home/ShowContentCom.vue';
import { useRouter } from 'vue-router';
const router = useRouter()

function searchChange() {
    router.push('/home/search')
}
</script>

<template>
    <header class="header">
        <van-search shape="round" background="rgba(2, 167, 240,0)" placeholder="搜目的地/景点" @focus="searchChange">
            <template #right-icon>
                <div class="search">
                    <van-button size="small" round type="primary" @click="$router.push('/tourism')">搜索</van-button>
                </div>
            </template>
        </van-search>

        <div class="searchbtn">
            <p><span>北京</span></p>
            <p><span>故宫</span></p>
            <p><span>天安门</span></p>
            <p><span>温泉</span></p>
            <p><span>世界杯</span></p>
            <p><span>景山公园</span></p>
        </div>
    </header>
    <main class="content">
        <NavContentCom />
        <SwipeCom />
        <ShowContentCom />
    </main>


</template>

<style scoped lang="scss">
.header {
    width: 100%;
    height: 1.3rem;
    background: linear-gradient(90deg, rgba(50, 119, 245)0%, rgba(2, 167, 240, 1) 99%);

    .van-search {
        margin-top: 30px;
    }

    .search {
        width: 100%;
        height: 100%;


        .van-button {
            padding-left: 0.15rem;
            padding-right: 0.15rem;
            position: absolute;
            right: -6px;
            bottom: -4.5px;
        }
    }

    .searchbtn {
        display: flex;
        justify-content: space-around;

        p {
            background-color: aqua;
            padding: 0.06rem;
            border-radius: 35px;
            background-color: #ffffff33;

            span {
                color: white;
            }
        }
    }
}
</style>